<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';

const usingRef = useTemplateRef<HTMLCanvasElement>('using');
onMounted(() => {
    const canvas = usingRef.value!.querySelector('canvas') as HTMLCanvasElement;
    const ctx = canvas.getContext('2d')!;

    /* 让画布像素与 CSS 尺寸一致 */
    const { width, height } = canvas.getBoundingClientRect();
    canvas.width = width;
    canvas.height = height;

    /* 关键：清空画布，保持透明 */
    ctx.clearRect(0, 0, width, height);

    /* 1. 整屏矩形（顺时针） */
    ctx.beginPath();
    ctx.rect(0, 0, width, height);

    /* 2. 中间圆（逆时针，与矩形方向相反即可触发 evenodd）*/
    const cx = width / 2;
    const cy = height / 2;
    const r = 160;
    ctx.arc(cx, cy, r, 0, Math.PI * 2);

    /* 3. 填充颜色（任意色都行，中间会被挖空） */
    ctx.fillStyle = 'rgb(153,190,246)'; // 半透明蓝色，仅作演示
    ctx.fill('evenodd');
});
</script>

<template>
    <div class="using" ref="using">
        我是 Canvas 下的元素（渐变背景）
        <canvas />
    </div>
</template>

<style scoped lang="scss">
.using {
    height: 400px;
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(-45deg, #4d9eff, #ef58a9);
    background-size: 200% 200%;
    animation: background 3s linear infinite;

    // 动画
    @keyframes background {
        0%,
        100% {
            background-position: 0 0;
        }
        50% {
            background-position: 100% 100%;
        }
    }

    canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* 可选：让鼠标事件穿透 */
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.81));
    }
}
</style>
